<script lang="ts">
import { ref, onMounted } from 'vue'
import Loader from '../components/Loader.vue'
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Keyboard, Scrollbar } from "swiper";
import { useRouter } from "vue-router"
import { getArticleList } from '@/api/articleList'
import { discoverArticleStore } from '@/stores/discoverArticle'
export default {
    components: {
        Swiper,
        Loader,
        SwiperSlide,
    },
    setup() {
        let router = useRouter();

        const goPage = (path: string, second_cid: number) => {
            router.push({
                path,
                query: {
                    second_cid
                }
            })
        }
        let articleList: any = ref(null)
        const getArticleListListFun: () => void = (): void => {
            getArticleList().then((data: any) => {
                articleList.value = data.data
                console.log(articleList.value);
                articleList.value.cell_list.forEach((item:any) => {
                    item['comment'] = [];
                })
                discoverArticleStore().$state.discoverarticle = articleList.value
            })

        }
        const playcountData = (value: number) => {
            if (value < 10000) {
                return value;
            }
            let w = value > 10000 ? value / 10000 : value;//万计算
            let y = w > 10000 ? parseInt(String(w / 10000)) + "亿" : parseInt(
                String(w)) + "万";
            return y;
        }
        // let 
        let DetectTabIndex = ref(0);
        onMounted(() => {
            getArticleListListFun()
        })
        return {
            DetectTabIndex,
            modules: [Keyboard, Scrollbar],
            articleList,
            goPage,
            playcountData,
        }
    }
}
</script>
<template>
    <div class="Home-Detect">
        <swiper slidesPerView="auto" :scrollbar="true" :modules="modules" :resistanceRatio=0 class="Detect-ChannelSwiper">
            <swiper-slide v-for="num  in 10" :key="num">
                <div class="Channel-Item">
                    <div class="Channel-ImgBox">
                        <!-- 图片 -->
                        <img src="../assets/images/Home-Icon/ic_my_browse.png">
                    </div>
                    <p class="one-txt-cut">整屋案例</p>
                </div>
            </swiper-slide>
        </swiper>
        <van-tabs v-model:active="DetectTabIndex" shrink>
            <van-tab title="推荐">
                <Loader v-if="!articleList"></Loader>
                <div class="recommend" v-if="articleList">
                    <div class="list">
                        <van-swipe class="my-swipe item" :autoplay="3000" indicator-color="white">
                            <van-swipe-item>
                                <img src="https://img1.baidu.com/it/u=3169526859,4054077349&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
                                    @click="goPage('/thingDetail', 1000)">
                            </van-swipe-item>
                            <van-swipe-item>
                                <img src="https://img0.baidu.com/it/u=110514796,3241080557&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1686934800&t=00999a2bc1309716ab91cb5029567427"
                                    @click="goPage('/thingDetail', 1001)">
                            </van-swipe-item>
                            <van-swipe-item>
                                <img src="https://fc1tn.baidu.com/it/u=4178753113,2397499408&fm=202&mola=new&crop=v1"
                                    @click="goPage('/thingDetail', 1106)">
                            </van-swipe-item>
                            <van-swipe-item>
                                <img src="https://img0.baidu.com/it/u=2282171181,4034940926&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333"
                                    @click="goPage('/thingDetail', 1003)">
                            </van-swipe-item>
                        </van-swipe>
                        <div class="item" v-for="(item, index) in articleList.cell_list" :key="index"  @click="goPage('/detailesr' , item.id)">
                            <img :src="item.cover_image_infos[0].url">
                            <p class="txt-cut">{{ item.abstract }}</p>
                            <div class="recommend_meage">
                                <div class="recommend_meage_left">
                                    <img :src="item.user_info.avatar_url">
                                    <div class="recommend_meage_name one-txt-cut">{{ item.user_info.name }}</div>
                                </div>
                                <div class="recommend_meage_right" @click="item.same_floor_plan=!item.same_floor_plan">
                                    <van-icon name="star-o" v-if="!item.same_floor_plan"/>
                                    <van-icon name="star" color="#ffcc00" v-if="item.same_floor_plan"/>
                                    <p>{{ item.favor_count ? playcountData(item.favor_count) : 0 }}</p>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </van-tab>
            <van-tab title="为你推荐2">
                你好2
            </van-tab>
            <van-tab title="为你推荐3">
                你好3
            </van-tab>
            <van-tab title="为你推荐4">
                你好4
            </van-tab>
            <van-tab title="为你推荐5">
                你好5
            </van-tab>
        </van-tabs>
    </div>
</template>
<style lang="scss" scoped>
.van-tabs__content {
    .Home-Detect {

        // 频道分类
        .Detect-ChannelSwiper::v-deep {
            padding: 0 22px 10px 0;
            background: #fff;

            .swiper-wrapper {
                height: 70px;

                .swiper-slide {
                    width: auto;
                    display: flex;
                    align-items: center;
                    margin-left: 22px;

                    .Channel-Item {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        overflow: hidden;
                        max-width: 68px;

                        .Channel-ImgBox {
                            width: 28px;
                            margin-bottom: 4px;
                        }

                        p {
                            font-size: 12px;
                            transform: scale(0.9);
                            color: #878789;
                            max-width: 100%;
                        }
                    }
                }
            }

            .swiper-scrollbar {
                width: 30px;
                height: 3px;
                left: 50%;
                bottom: 10px;
                transform: translateX(-50%);

                .swiper-scrollbar-drag {
                    background: #2daea9;
                }
            }

        }

        .van-tabs {

            // background: #2daea9;
            .van-tab__panel {
                position: relative;
                min-height: 79vh;

                .loadingio-spinner-cube-fwf48mahvl {
                    position: absolute;
                    top: 30%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background: transparent;
                }
            }
        }
    }
}


.recommend {
    background-color: #f5f5f5;
    padding: 10px 6px 55px;

    h3 {
        color: #898989;
        font-size: 15px;
        margin-bottom: 10px;
    }
}

.list {
    column-count: 2;
    column-gap: 10px;
    column-width: 100%;

    .item {
        width: 100%;
        break-inside: avoid;
        margin-top: 5px;
        background: #fff;
        border-radius: 4px;
        overflow: hidden;

        &:nth-child(1) {
            margin-top: 0;
        }

        img {
            width: 100%;
            max-height: 200px;
            object-fit: cover;
            object-position: top;
        }

        >p {
            margin-top: 5px;
            padding: 0px 5px;
            word-wrap: break-word;
            font-size: 14px;
            font-weight: 600;
        }
    }
}

.recommend_meage {
    margin-top: 5px;
    padding: 0px 5px 5px;
    display: flex;
    justify-content: space-between;

    .recommend_meage_left {
        display: flex;
        flex: 1;
        overflow: hidden;

        img {
            width: 22px;
            height: 22px;
            display: block;
            border-radius: 50%;
            margin-right: 5px;
        }

        .recommend_meage_name {
            font-size: 12px;
            color: #444;
            max-width: 65%;

        }
    }

    .recommend_meage_right {
        display: flex;
        

        i {
            margin-right: 6px;
            width: 18px;
            height: 18px;
            transform: translateY(-1px);
        }

        p {
            font-size: 14px;
            color: #444;
            font-weight: normal;
        }
    }
}


// 发现页
</style>